<template>
    <view>
        <view class="table">
            <view class="table-header">
                <view class="table-cell">会员等级</view>
                <view class="table-cell">成长值</view>
                <view class="table-cell">运费抵扣卷</view>
            </view>
            <view class="table-row" v-for="(item,index) in tableData" :key="index" :class="index % 2 !=0?'table-left':''">
                <view class="table-cell">{{item.name}}</view>
                <view class="table-cell">{{item.grow}}</view>
                <view class="table-cell">{{item.roll}}</view>
            </view>
        </view>
        <view class="gz">
            <view>爱心值规则:</view>
            <view>1，用户在获取积分的同时，会获得跟积分相当分值的爱心成长值。</view>
            <view>2，用户获得的成长值按照获取进行累计，不因积分消耗而降级。</view>
            <view>3，每个等级每个月可兑换的次数不同，L3以上爱心值用户可获得运费券，满足条件可联系官方客服领取，可用于兑换下单时免邮领取。</view>
        </view>
    </view>

  </template>

  <script>
    export default {
      data(){
        return {
          tableData:[
            {
              name:'Lv.1',
              grow:'0~200分',
              roll:'-'
            },
            {
              name:'Lv.2',
              grow:'201~2000分',
              roll:'-'
            },
            {
              name:'Lv.3',
              grow:'2001~5000分',
              roll:'1张'
            },
            {
              name:'Lv.4',
              grow:'5001~10000分',
              roll:'2张'
            },
            {
              name:'Lv.5',
              grow:'10000~20000分',
              roll:'3张'
            },
            {
              name:'Lv.6',
              grow:'20000~50000分',
              roll:'5张'
            },
          ]
        }
      }
    }
    </script>

<style>
    .gz{
        line-height: 44rpx;
        padding: 25rpx;
        color: #444;
        font-size: 26rpx;
        margin-top: 30rpx;
    }
    .table{
        width: 98%;
        margin-left: 1%;
        border: 1rpx solid #f2f2f2;
    }
    .table-left{
        background-color:#f8f9eb !important;
    }
    .table-header{
      display:flex;
      height:100rpx;
      align-items:center;
      background-color:#c1e4e4;
      font-size:32rpx;
    }
    .table-cell{
      flex:1;
      text-align:center;
    }
    .table-row{
      display:flex;
      height:100rpx;
      align-items:center;
      border-bottom:1rpx solid #f0f0f0;
    }
    </style>
